<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="item-list" v-cloak>
        <div class="item" v-for="item in items">
            <div class="cover">
                <img src="https://tcdn.udeve.net/fang2021/377c3034-69e7-4f70-83a1-91d4b3d8f819.jpg" />
            </div>
            <div class="footer">
                <div class="title">{{ item.title }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            loading: false,
        };
    },
    props: {
        items: { type: Array, default: [] },
    },

    mounted: function () { },

    computed: {},

    methods: {},
};
</script>

<style scoped>
.item-list {
    width: 100%;
    display: flex;
    padding: 0 20px;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 0;
}


.item {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: center;
    width: 280px;
    height: 378px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    margin-right: 20px;
}

.item .footer {
    height: 128px;
    box-sizing: border-box;
    padding: 24px;
    font-size: 30px;
    color: #333;
    line-height: 1.4;
}

.item .cover img {
    width: 100%;
    width: 280px;
    height: 250px;
}

.item .title {
    font-weight: bold;
    color: 333;
}
</style>
